<template>
  <div class="all-wrap" >
   <div class="all-title">权限管理</div>
   <div class="top-controllers" style="margin-bottom: 4px;">
     <el-input
       v-model="searchValue"
       clearable
       class="w-50 m-2"
       placeholder="请输入权限名"
     />
     <el-button type="primary" @click="searchClick">搜索</el-button>
     <el-button type="primary" @click="addAuthFn">新增</el-button>
   </div>
   <el-table :data="tableData" border style="width: 100%">
     <el-table-column type="index" width="50" />
     <el-table-column prop="authName" label="authName"  />
     <el-table-column prop="path" label="路径"  />
     <el-table-column prop="description" label="description" />
     <el-table-column label="roles" >
      <template  #default="scope">
        <el-tag v-for="(item,index) in scope.row.roles" :key="index">{{item.roleName}}</el-tag>
      </template>
    </el-table-column>
     <el-table-column label="Controllers" >
       <template  #default="scope">
         <el-button type="primary" size="small" @click="editData(scope.row)">修改</el-button>
         <el-button type="primary" size="small" @click="editDataRole(scope.row)">编辑角色</el-button>
         <el-popconfirm
           width="220"
           confirm-button-text="OK"
           cancel-button-text="No, Thanks"
           :icon="InfoFilled"
           icon-color="#626AEF"
           title="Are you sure to delete this?"
           @confirm="confirmEvent(scope.row)"
         >
           <template #reference>
             <el-button>Delete</el-button>
           </template>
         </el-popconfirm>
       </template>
     </el-table-column>
   </el-table>
   <br/>
   <el-pagination
     v-model:current-page="currentPage"
     :page-size="10"
     layout="total, prev, pager, next"
     :total="dataTotal"
     @current-change="handleCurrentChange"
   />
   <el-dialog v-model="dialogFormVisible" :title="dialogState">
     <el-form :model="form" ref="ruleFormRef" label-width="100" :rules="rules">
       <el-form-item label="权限名称"  prop="auth_name">
         <el-input v-model="form.auth_name" autocomplete="off" />
       </el-form-item>
       <el-form-item label="权限路径"  prop="path">
         <el-input v-model="form.path" autocomplete="off" />
       </el-form-item>
       <el-form-item label="介绍" props="description">
         <el-input v-model="form.description" autocomplete="off" />
       </el-form-item>
     </el-form>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="cancel(ruleFormRef)">取消</el-button>
         <el-button type="primary" @click="submit(ruleFormRef)">
           确定
         </el-button>
       </span>
     </template>
   </el-dialog>
  <el-dialog v-model="dialogRole" title="修改角色">
    <el-select v-model="roleArr" multiple placeholder="Select" style="width: 100%">
      <el-option v-for="item in rolesOptions" :key="item.id" :label="item.roleName" :value="item.id" />
    </el-select>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelEdit">取消</el-button>
        <el-button type="primary" @click="submitEdit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
 </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onBeforeMount} from 'vue';
import {ElMessage, FormInstance}from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'
import {getAuth,addAuth,editAuth,deleteAuth,editAuthRole} from '../apis/auth'
import {getRoleList} from '../apis/role'
interface option {
  id:number
  roleName:string
}


let searchValue=ref('')
let tableData=ref([])
let currentPage=ref(1)
let dataTotal=ref(0)
let dialogFormVisible=ref(false)
let dialogState=ref('新增数据')
let editId=ref(0)
let dialogRole=ref(false)
let roleArr=ref([])
let rolesOptions=ref<option[]>([])
let form=reactive({
 auth_name:'',
 path:'',
 description:''
})
const ruleFormRef = ref<FormInstance>()
let rules=reactive({
 auth_name:[
   {required:true,message:"权限名称必填",trigger:"blur"},
   {min:2,max:8,message:"名称长度2-8"}
 ],
 path:[
   {required:true,message:"权限路径必填",trigger:"blur"},
   {min:2,max:50,message:"名称长度2-50"}
 ],
 description:[{required:false},]
})

const cancelEdit=()=>{
  editId.value=0
  roleArr.value=[]
  dialogFormVisible.value=false
}
const submitEdit=async()=>{
  let params={
    id:editId.value,
    roleId:roleArr.value.join(",")
  }
  let res=await editAuthRole(params)
  if(res.status==200){
    ElMessage({
      message: '修改权限角色成功',
      type: 'success',
    })
    getData()
    dialogRole.value=false
    cancelEdit()
  }
}

const resetForm=()=>{
 let empty={}
 for(let i in form){
   empty[i]=''
 }
 Object.assign(form,empty)
}
const searchClick=()=>{
 currentPage.value=1
 getData()
}
const addAuthFn=()=>{
  dialogState.value='新增数据'
 dialogFormVisible.value=true
}
const editData=(parmas)=>{
 dialogState.value="修改数据"
 editId.value=parmas.id
 dialogFormVisible.value=true
 form=reactive({
   "auth_name":parmas.authName,
   "path":parmas.path,
   "description":parmas.description
 })
}
const editDataRole=(row)=>{
  editId.value=row.id
  roleArr.value=row.roles.map(e=>e.id)
  dialogRole.value=true
}
const confirmEvent=async(row)=>{
 let res=await deleteAuth({id:row.id})
 if(res.status==200){
   ElMessage({
     message: '删除权限成功',
     type: 'success',
   })
   getData()
 }
}
const handleCurrentChange=()=>{
 getData()
}
const cancel=(ruleFormRef)=>{
  dialogFormVisible.value=false
  resetForm()
}
const submit=async(formEl)=>{
 await formEl.validate(async(valid, fields) => {
   if(valid){
     if(dialogState.value=='新增数据'){
       let res=await addAuth(form)
       if(res.status==200){
         ElMessage({
           message: '新增权限成功',
           type: 'success',
         })
         dialogFormVisible.value=false
         getData()
         resetForm()
       }
     }else{
       let res=await editAuth({
         id:editId.value,
         ...form
       })
       if(res.status==200){
         ElMessage({
           message: '修改权限成功',
           type: 'success',
         })
         dialogFormVisible.value=false
         getData()
         resetForm()
       }
     }
   }else{
     console.log(fields)
   }
 })
}
const getData=async()=>{
 let parmas={
   "auth_name":searchValue.value.trim(),
   "page": currentPage.value,
 }
 let res=await getAuth(parmas)
 if (res.status==200){
   tableData.value=res.data.data
   dataTotal.value=res.data.total
 }
}
onBeforeMount(()=>{
 getData()
 getRoleList({page:1,pageSize:99}).then(res=>{
  if(res.status==200){
    rolesOptions.value=res.data.data
  }
 })
})
</script>
<style lang="less" scoped>
.top-controllers{
 width: 100%;
 height: 30px;
 .w-50{
   width: 200px;
   margin-right: 20px;
 }
}

</style>